import React, { Suspense } from "react";
import { BrowserRouter, useRoutes } from "react-router-dom";
// 路由懒加载  必须搭配 Suspense
const MainLayout = React.lazy(() => import("../mainLayout"));
const Home = React.lazy(() => import("../views/home"));
const Detail = React.lazy(() => import("../views/detail"));
const Cart = React.lazy(() => import("../views/cart"));
const Info = React.lazy(() => import("../views/info"));
const City = React.lazy(() => import("../views/city"));

const routes = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: [
      {
        path: "/",
        element: <Home></Home>,
      },
      {
        path: "/cart",
        element: <Cart></Cart>,
      },
    ],
  },
  {
    path: "/detail",
    element: <Detail></Detail>,
  },
  {
    path: "/info",
    element: <Info></Info>,
  },
  {
    path: "/city",
    element: <City></City>,
  },
];

const Router = () => {
  const RouterView = () => useRoutes(routes);
  return (
    // 动态路由加载的时候， 页面临时显示的内容fallback
    <Suspense fallback={<div>路由加载中..</div>}>
      <RouterView></RouterView>
    </Suspense>
  );
};

export default Router;
